<template>
  <section>
    <h2>Hello-actions</h2>
    <fieldset>
      <legend>增加学生</legend>
      <div>姓名：<input type="text" v-model="formData.name" /></div>
      <div>年龄：<input type="number" v-model.number="formData.age" /></div>
      <div>
        性别： 男<input
          type="radio"
          value="男"
          name="sex"
          v-model="formData.sex"
        />
        女<input type="radio" value="女" name="sex" v-model="formData.sex" />
      </div>
      <button @click="handleAdd">添加</button>
    </fieldset>
    <h3>学生列表</h3>
    <ol>
        <li v-for="item in $store.state.stus" :key="item.name">{{item.name}} {{item.age}}</li>
    </ol>
  </section>
</template>

<script>
export default {
    data() {
        return {
            formData: {

            }
        }
    },
    methods: {
        handleAdd() {
            this.$store.dispatch("dispatchStu",{...this.formData});
        }
    }
};
</script>

<style>
</style>